import { Extension } from '@codemirror/state';
import { EditorView } from '@codemirror/view';

export function MyTheme(): Extension {
    return [baseTheme,defaultTheme];
}

export const codeFontFamily = {
    fontFamily: 'monaco !important',
};

  
const baseTheme = EditorView.theme({
    '&.cm-editor': {
        height: '100%',
        border: '1px solid grey',
        borderRadius:'4px'
    },
    '& .cm-content':{
        fontFamily: '"Open Sans","Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif',
        color: 'rgb(51, 51, 51)',
        lineHeight: '1.6'
    },
    '& .cm-line': {
        textAlign:'left'
    },
    '& .cm-scroller': {
        padding: '10px 2%',
    },
    '&.cm-editor.cm-focused': {
        outline: 'none'
    },
    //设置一个最小高度
    ".cm-content, .cm-gutter": {
        minHeight: "120px",

    }
});


const defaultTheme = EditorView.theme(
    {
      '&.cm-wrap': {
        backgroundColor: 'white',
      },
      '.cm-cursor': {
        borderColor: '#007AFF',
      },
      '&.cm-focused .cm-selectionBackground': {
        background: 'rgba(0,122,255, 0.3)',
      },
      '.cm-content': { caretColor: '#188FE9' },
      '.cm-line': { color: '#1E1E1E' },
      '.cm-link': { color: '#007AFF' },
      '.cm-blockquote': {
        backgroundColor: '#F9F9F9',
      },
      '.cm-codeblock': {
        backgroundColor: '#F9F9F9',
      },
      '.cm-inline-code': {
        backgroundColor: 'rgba(195,195,195,0.3)',
        borderRadius: '3px',
        padding: '2px',
      },
      '.cm-list-ol': {
        color: '#007AFF',
      },
      '.cm-bullet': {
        backgroundColor: '#007AFF',
      },
      '.cm-hr': {
        backgroundColor: '#CCC',
      },
      '.cmt-meta': {
        color: '#007AFF',
      },
      'cmt-labelName': {
        color: '#aaa',
      },
      '.cmt-url': {
        color: '#007AFF',
      },
      '.cmt-variableName': {
        color: '#fb7c3e',
      },
      '.cmt-keyword': {
        color: '#e83461',
      },
      '.cmt-number': {
        color: '#e0b128',
      },
      '.cmt-propertyName': {
        color: '#AC9CF2',
      },
      '.cmt-operator': {
        color: '#31b4c3',
      },
      '.cmt-comment': {
        color: '#ccc',
      },
      '.cmt-string': {
        color: '#62a521',
      },
      '.cmt-punctuation': {
        color: '#aaaaaa',
      },
      '.cm-front-matter-start, .cm-front-matter-start *, .cm-front-matter-end *':
        {
          color: '#007AFF',
        },
    },
    { dark: false },
  );
  